<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <title>拼图前端框架HTML模版</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./static/pintuer.css">
    <link href="./static/baidueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script src="./static/jquery.js"></script>
    <script src="./static/pintuer.js"></script>
</head>

<body>

<!--导航 start-->
<div class="navbar padding nav-big fixed bg-white layout" style="z-index: 1000;">
    <div class="container">
        <div class="navbar-head">
            <button class="button icon-navicon" data-target="#navbar1">
            </button>
            <a href="#">
                <img src="./static/logo.jpg" width="40" class="radius-circle ring-hover"/>
            </a>
        </div>
        <div class="navbar-body nav-navicon" id="navbar1">
            <ul class="nav nav-inline nav-menu">
                <li class="active"><a href="./index.html">首页</a></li>
                <li class="">
                    <a href="#">分类<span class="arrow"></span></a>
                    <ul class="drop-menu">
                        <li><a href="#">javascript</a></li>
                        <li><a href="#">php</a></li>
                        <li><a href="#">linux</a></li>
                    </ul>
                </li>
                <li><a href="./index.html">留言板</a></li>
                <li><a href="./index.html">说说</a></li>
                <li><a href="./index.html">访客</a></li>
                <li><a href="./index.html">关于我</a></li>
            </ul>
            <div class="navbar-form navbar-left">
                <form>
                    <input type="text" class="input input-auto" name="keywords" size="15" placeholder="关键词"/>
                    <input type="submit" name="search" value="搜索" class="button"/>
                </form>
            </div>
            <div class="navbar-text navbar-right hidden-s">
                QQ:457509824
            </div>
        </div>
    </div>
</div>
<!--导航 end-->

<!--轮播 start-->
<div class="banner">
    <div class="carousel">
        <div class="item">
            <img src="./static/image/1.jpg" alt="">
        </div>
        <div class="item">
            <img src="./static/image/2.jpg" alt="">
        </div>
        <div class="item">
            <img src="./static/image/3.jpg" alt="">
        </div>
    </div>
</div>
<!--轮播 end-->

<!--面包屑导航 start-->
<div class="container">
    <ul class="bread padding-big text-big">
        <li><a href="#" class="icon-home">首页</a></li>
        <li>最新文章</li>
    </ul>
</div>
<!--面包屑导航 end-->

<div class="container">
    <div class="line">
        <!--主要内容  left start-->
        <div class="xb8 xl12">

            <!--循环主体内容 start-->
            <div class="padding-big margin-bottom box-shadow">
                <!--文章详情 start-->
                <div class="detail">
                    <h1>
                        拼图 Pintuer-国产跨屏响应式前端框架
                    </h1>
                    <p class="text-center">
                        时间：2015-1-1 作者：拼图 来源：拼图</p>
                    <p align="center">
                        <img class="img-responsive" src="./static/image/1.jpg">
                    </p>
                    <p>
                        国内优秀的HTML、CSS、JS跨屏响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、快速、便捷。改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。</p>

                    <p>
                        拼图
                        Pintuer：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。</p>
                    <p>
                        拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。</p>
                    <p>
                        <strong>功能特色：</strong>
                    </p>
                    <p>
                        移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面浏览器的同时，更适应了移动互联网的潮流。</p>
                    <p>
                        组件丰富、海量插件：拼图前端框架重新定义了CSS基础、常用元件及JS组件，可快速构架前端界面，实现跨屏响应。同时兼容所有jQuery插件，在项目中可以灵活使用，让前端开发如虎添翼。</p>
                    <p>
                        轻量高效、国产开源：拼图基于应用广泛jQuery插件，轻量高效；相对于国外的前端框架，拼图前端框架侧重于对中文的支持，符合国人的视觉及体验，实现到国内主流浏览器的支持，减少兼容性测试时间，提高开发效率。</p>
                </div>
                <!--文章详情 end-->

                <hr>

                <!--评论区域 start-->
                <script type="text/javascript" src="./static/baidueditor/third-party/template.min.js"></script>
                <script type="text/javascript" src="./static/baidueditor/umeditor.config.js"></script>
                <script type="text/javascript" src="./static/baidueditor/umeditor.min.js"></script>
                <script type="text/javascript" src="./static/baidueditor/lang/zh-cn/zh-cn.js"></script>

                <div class="text-big">
                    <strong>2条评论，1人参与</strong>
                    <a href="#"><span class="icon-heart-o text-red x9-move">喜欢</span></a>
                </div>

                <div class="media media-x">
                    <a class="float-left" href="#">
                        <img src="./static/image/duser.jpg" class="radius" alt="...">
                        <p>
                            <button type="submit" class="button button-big">回复</button>
                        </p>
                    </a>
                    <div class="media-body" style="overflow-y:auto ">
                        <script type="text/plain" id="myEditor" style="height:100px;width:100%;"></script>
                    </div>
                </div>

                <script type="text/javascript">
                    //实例化编辑器
                    var um = UM.getEditor('myEditor', {
                        toolbar: [
                            ' emotion'
                        ]
                    });
                </script>


                <div class="media media-x">
                    <a class="float-left" href="#">
                        <img src="./static/image/duser.jpg" class="radius" alt="...">
                    </a>
                    <div class="media-body">
                        <strong>媒体标题</strong>拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
                    </div>
                </div>
                <div class="media media-x">
                    <a class="float-left" href="#">
                        <img src="./static/image/duser.jpg" class="radius" alt="...">
                    </a>
                    <div class="media-body">
                        <strong>媒体标题</strong>拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
                    </div>
                </div>


                <!--评论区域 end-->

            </div>
            <!--循环主体内容 end-->

            <!--分页 start-->
            <div class="page padding-big-bottom text-right">
                <ul class="pagination pagination-group border-main">
                    <li class="disabled"><a href="#">«</a></li>
                    <li><a href="#">1</a></li>
                    <li class="active"><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">»</a></li>
                </ul>
            </div>
            <!--分页 end-->

        </div>
        <!--主要内容  left end-->

        <!--主要内容  right start-->
        <div class="xb4 xl12">
            <div class="padding-big-left ">

                <!--用户登陆 start-->
                <div class="user">
                    <p>
                    <h2>用户登陆</h2>
                    </p>
                    <form method="post" class="form-auto">
                        <div class="form-group">
                            <div class="field field-icon">
                                <input type="text" class="input" id="username" name="username" size="30"
                                       placeholder="手机/邮箱/账号"/>
                                <span class="icon icon-user"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon">
                                <input type="password" class="input" id="password" name="password" size="30"
                                       placeholder="请输入密码"/>
                                <span class="icon icon-key"></span>
                            </div>
                        </div>
                        <div class="form-button">
                            <button class="button" type="submit">
                                登录
                            </button>
                            <a class="button" href="./register.html">
                                注册
                            </a>
                        </div>
                    </form>
                </div>
                <!--用户登陆 end-->

                <hr>

                <!--标签 start-->
                <div class="mytag">
                    <p>
                    <h2>我的标签</h2>
                    </p>
                    <a href="" class="button button-little bg-red shake-hover margin-little">21323</a>
                    <a href="" class="button button-little bg-main shake-hover margin-little">dsadsadsad</a>
                    <a href="" class="button button-little bg-yellow shake-hover margin-little">21sdafdsfdd323</a>
                    <a href="" class="button button-little bg-blue shake-hover margin-little">213d23</a>
                    <a href="" class="button button-little bg-green shake-hover margin-little">213s23</a>
                    <a href="" class="button button-little bg-red shake-hover margin-little">21323</a>
                    <a href="" class="button button-little bg-main shake-hover margin-little">dsadfdsfdsfsadsad</a>
                    <a href="" class="button button-little bg-yellow shake-hover margin-little">21sdad323</a>
                    <a href="" class="button button-little bg-blue shake-hover margin-little">213d2fdsf3</a>
                    <a href="" class="button button-little bg-green shake-hover margin-little">213s23</a>
                    <a href="" class="button button-little bg-red shake-hover margin-little">21323</a>
                    <a href="" class="button button-little bg-main shake-hover margin-little">dsadsadsad</a>
                    <a href="" class="button button-little bg-yellow shake-hover margin-little">21sdad323</a>
                    <a href="" class="button button-little bg-blue shake-hover margin-little">213dfdsfdf23</a>
                    <a href="" class="button button-little bg-green shake-hover margin-little">213s23</a>
                </div>
                <!--标签 end-->

                <hr>

                <!--随机文章 start-->
                <div class="randarticle">
                    <p>
                    <h2>随机文章</h2>
                    </p>
                    <div class="media media-x clearfix">
                        <div class="x3">
                            <a class="float-left" href="#">
                                <img src="./static/image/xiaotu.png" alt="" class="img-responsive">
                            </a>
                        </div>
                        <div class="x9">
                            <div class="media-body text-more ">
                                <strong class="text-more">
                                    GPS坐标转百度地图坐标 示例dsadsadsdsadsdasdasdsadasdsadsa
                                </strong>拼图，是国内一款开源的专业响dsdsads应式网页前dsadsads端框架。
                            </div>
                            <button class="button button-little border-mix">查看详情</button>
                        </div>
                    </div>

                    <div class="media media-x clearfix">
                        <div class="x3">
                            <a class="float-left" href="#">
                                <img src="./static/image/xiaotu.png" alt="" class="img-responsive">
                            </a>
                        </div>
                        <div class="x9">
                            <div class="media-body text-more ">
                                <strong class="text-more">
                                    GPS坐标转百度地图坐标 示例dsadsadsdsadsdasdasdsadasdsadsa
                                </strong>拼图，是国内一款开源的专业响dsdsads应式网页前dsadsads端框架。
                            </div>
                            <button class="button button-little border-mix">查看详情</button>
                        </div>
                    </div>


                </div>
                <!--随机文章 end-->

                <hr>

                <div class="else">

                    <div class="tab border-main" data-toggle="hover">
                        <div class="tab-head">
                            <ul class="tab-nav">
                                <li class="active"><a href="#tab-start2">最新留言</a></li>
                                <li><a href="#tab-css2">最多点击</a></li>
                                <li><a href="#tab-units2">友情链接</a></li>
                            </ul>
                        </div>
                        <div class="tab-body tab-body-bordered">
                            <div class="tab-panel active" id="tab-start2">

                                <div class="media-inline">
                                    <div class="media media-x clearfix">
                                        <a class="float-left" href="#">
                                            <img src="./static/image/user.jpg" class="radius-circle" width="60"
                                                 alt="...">
                                        </a>
                                        <div class="media-body">
                                            <strong>媒体标题</strong>拼图，是国内一款开源的专业响应式网页前端框架。
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="tab-panel" id="tab-css2">
                                <span class="icon-thumbs-o-up"></span><a href="#"> 关于ThinkPHP下使用Uploadify插件 仅有火狐提示HTTP
                                Error (302)错误的解决办法(26728)</a>
                            </div>
                            <div class="tab-panel" id="tab-units2">
                                <a href="#" class="button border-main">thinkphp</a>
                                <a href="#" class="button border-main">laravel</a>
                                <a href="#" class="button border-main">wordpress</a>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <!--主要内容  right end-->
        </div>
    </div>
</div>

<!--回到顶部 start-->
<div class="container-layout fixed x11-move" data-style="fixed-bottom" data-offset-fixed="10" style="z-index:10">
    <div class="text-main text-large win-backtop bounce-hover">
        <span class="icon-arrow-up"></span>
    </div>
</div>
<!--回到顶部 end-->

<div class="clearfix"></div>

<!--页脚 start-->
<div class="layout">
    <div class="border-top padding-top">
        <div class="text-center">
            <ul class="nav nav-inline">
                <li class=""><a href="#">网站首页</a></li>
                <li><a href="#">新闻资讯</a></li>
                <li><a href="#">产品中心</a></li>
                <li><a href="#">技术反馈</a></li>
                <li><a href="#">留言反馈</a></li>
                <li><a href="#">联系方式</a></li>
            </ul>
        </div>
        <div class="text-center height-big">
            Copyright © dp & 版权所有 ，ICP备：xxxxx
        </div>
    </div>
</div>
<!--页脚 end-->


</body>

</html>